<script setup lang="ts">
import { ref, reactive, defineAsyncComponent } from "vue";
import { getAssetsFile } from "@visual/utils";
// const emits = defineEmits(["generalEvent"]);
import { eventBus } from "@/views/all/visual/template/utils/eventBus";

// let compArr = ["mposalert", "mposestop", "mposfix", "mposinspection", "mposmaintian", "mposoffline", "mposwarn"];
let compArr = ["posalert", "posestop", "posfix", "posinspection", "posmaintian", "posoffline", "poswarn"];
const imgLabel = {
  posalert: "报警",
  posestop: "待机",
  posfix: "维修",
  posinspection: "巡检",
  posmaintian: "保养",
  posoffline: "离线",
  poswarn: "异常"
};
const imgArr = ref([]);
for (let item of compArr) {
  // imgArr.value.push({ showName: item, hideName: `h${item}`, acitve: true });
  imgArr.value.push({ showName: `m${item}`, hideName: `h${item}`, active: item === "posalert" ? true : false, rawName: item, label: imgLabel[item] });
}
const generalEvent = item => {
  imgArr.value.forEach(imgItem => {
    if (item.rawName === imgItem.rawName) {
      imgItem.active = !imgItem.active;
      eventBus.emit("posFilterEvent", imgItem);
    } else if (item.rawName !== imgItem.rawName && imgItem.active) {
      imgItem.active = false;
      eventBus.emit("posFilterEvent", imgItem);
    }
  });
  // item.active = !item.active;
  console.log("generalEvent", imgArr);
  // // emits("generalEvent", { type: "compFilter", compEmitData: item });
  // eventBus.emit("posFilterEvent", item);
};
</script>

<template>
  <div class="max[100%] h-[100%] flex flex-wrap justify-around items-center bg-white rounded-[5px] filter-menu">
    <div
      v-for="item in imgArr"
      :key="item.showName"
      class="w-[20px] h-[27px] cursor-pointer grow-0 shrink-0 flex justify-center items-center mr-1"
      @click="generalEvent(item)"
    >
      <px-tooltip :content="item.label" placement="top" effect="dark">
        <img v-if="item.active" class="w-[20px] h-[27px]" :src="getAssetsFile(item.showName)" />
        <img v-else class="w-[20px] h-[27px]" :src="getAssetsFile(item.hideName)" />
      </px-tooltip>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.filter-menu {
  padding: 0 10px;
}
</style>
